import * as echarts from 'echarts'
import { LINE_TOOLTIP, LEGEND, XAXIS_NAME, AXIS_LABEL, YAXIS_NAME } from '@/utils/chartConfig'
//@ts-ignore
import _ from 'lodash'
export const option1 = {
    tooltip: LINE_TOOLTIP,
    legend: {
        itemGap: 10,
        itemWidth: 8,
        itemHeight: 8,
        right: '10%',
        top: '3%',
        // padding:[10,10],
        data: [
            {
                name: '车祸',
                itemStyle: {
                    // color:"#fff",
                },
                textStyle: LEGEND
            },
            {
                name: '路况',
                textStyle: LEGEND
            }
        ]
    },
    grid: {
        top: '30%',
        left: '0%',
        right: '5%',
        bottom: '10%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: ['姑苏', '虎丘', '吴中', '相城', '吴江', '常熟', '张家港', '昆山'],
        name: '',
        nameTextStyle: XAXIS_NAME,
        axisLabel: AXIS_LABEL,
        axisLine: {
            show: true
        },
        splitLine: {
            //网格线
            lineStyle: {
                color: '#6e717e',
                type: 'dotted' //设置网格线类型 dotted：虚线   solid:实线
            },
            show: false //隐藏或显示
        }
    },
    yAxis: {
        type: 'value',
        name: '单位：件',
        offset: -5,

        axisLine: {
            show: true
        },
        axisLabel: AXIS_LABEL,
        // data:[100,200,300,400],
        nameTextStyle: YAXIS_NAME,
        splitLine: {
            //网格线
            lineStyle: {
                color: '#6e717e',
                type: 'dotted' //设置网格线类型 dotted：虚线   solid:实线
            },
            show: true //隐藏或显示
        }
    },
    series: [
        {
            name: '车祸',
            type: 'bar',
            data: (function () {
                const arr = []
                for (let i = 0; i < 13; i++) {
                    arr.push(_.random(20, 80))
                }
                return arr
            })(),
            barWidth: 5,
            itemStyle: {
                // borderRadius: 4,
                color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
                    {
                        offset: 0,
                        color: 'rgb(146, 211, 255)'
                    },
                    {
                        offset: 0.7,
                        color: 'rgb(101, 127, 255)'
                    }
                ])
            }
        },
        {
            name: '路况',
            type: 'bar',
            barWidth: 5,
            data: (function () {
                const arr = []
                for (let i = 0; i < 13; i++) {
                    arr.push(_.random(20, 80))
                }
                return arr
            })(),
            itemStyle: {
                // borderRadius: 4,
                color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
                    {
                        offset: 0,
                        color: '#724c32'
                    },
                    {
                        offset: 0.7,
                        color: '#fdd095'
                    }
                ])
            }
        },
        {
            name: '意外',
            type: 'bar',
            barWidth: 5,
            data: (function () {
                const arr = []
                for (let i = 0; i < 13; i++) {
                    arr.push(_.random(20, 80))
                }
                return arr
            })(),
            itemStyle: {
                // borderRadius: 4,
                color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
                    {
                        offset: 0,
                        color: '#eafdf7'
                    },
                    {
                        offset: 0.7,
                        color: '#9ac4a0'
                    }
                ])
            }
        }
    ]
}
export const option2 = () => {
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: '#57617B'
                }
            },
            backgroundColor: 'rgba(0,0,0,0.5)',
            borderColor: 'transparent',
            textStyle: {
                color: '#fff',
                fontSize: 16
            }
        },
        legend: {
            icon: 'rect',
            itemWidth: 20,
            itemHeight: 7,
            itemGap: 13,
            data: ['重大交通事故', '一般交通事故', '轻微交通事故'],
            top: '3%',
            right: '5%',
            bottom: '5%',
            textStyle: {
                fontSize: 12,
                color: '#ffffff'
            }
        },
        grid: {
            top: '25%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                //   name:'月',
                nameTextStyle: {
                    padding: [10, 0, 20]
                },
                type: 'category',
                boundaryGap: false,
                axisLine: {
                    lineStyle: {
                        color: '#ffffff'
                    }
                },
                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '',
                // name: 'Precipitation',
                axisTick: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#ffffff'
                    }
                },
                axisLabel: {
                    margin: 10,
                    fontSize: 14
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#57617B'
                    }
                }
            },
            {
                type: 'value',
                // name: 'Temperature',
                interval: 3,
                axisTick: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#ffffff'
                    }
                },
                axisLabel: {
                    margin: 10,
                    fontSize: 14
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#57617B'
                    }
                }
            }
        ],
        series: [
            {
                name: '重大交通事故',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                showSymbol: false,
                lineStyle: {
                    width: 3
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        1,
                        0,
                        [
                            {
                                offset: 0,
                                color: 'rgba(49,61,61, 0.3)'
                            },
                            {
                                offset: 0.8,
                                color: 'rgba(17,235,210, 0)'
                            }
                        ],
                        false
                    ),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10
                },
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(17,235,210,1)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(17,235,210,0.2)'
                        }
                    ])
                },
                emphasis: {
                    color: 'rgb(0,196,132)',
                    borderColor: 'rgba(0,196,132,0.2)',
                    extraCssText: 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);',
                    borderWidth: 10
                },
                data: [220, 182, 191, 134, 150, 120, 110, 125, 150, 120, 110, 125]
            },
            {
                name: '一般交通事故',
                type: 'line',
                yAxisIndex: 1,
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                showSymbol: false,
                lineStyle: {
                    width: 3
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                            {
                                offset: 0,
                                color: 'rgba(228,220,12,0.5)'
                            },
                            {
                                offset: 0.8,
                                color: 'rgba(235,235,21, 0)'
                            }
                        ],
                        false
                    ),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10
                },
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(228,220,12,1)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(235,235,21,0.2)'
                        }
                    ])
                },
                emphasis: {
                    color: 'rgba(228,220,12,1)',
                    borderColor: 'rgba(228,220,12,0.2)',
                    extraCssText: 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);',
                    borderWidth: 10
                },
                data: [3.2, 5.2, 6.2, 4.5, 3.2, 4.5, 5.2, 6.2, 3.5, 2.1, 5.4, 7.0]
            },
            {
                name: '轻微交通事故',
                type: 'line',
                yAxisIndex: 1,
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                showSymbol: false,
                lineStyle: {
                    width: 3
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                            {
                                offset: 0,
                                color: 'rgba(35,41,12,0.5)'
                            },
                            {
                                offset: 0.8,
                                color: 'rgba(235,235,21, 0)'
                            }
                        ],
                        false
                    ),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10
                },
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(158,162,225,1)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(235,235,21,0.2)'
                        }
                    ])
                },
                emphasis: {
                    color: 'rgba(228,220,12,1)',
                    borderColor: 'rgba(228,220,12,0.2)',
                    extraCssText: 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);',
                    borderWidth: 10
                },
                data: [1.2, 3.2, 5.2, 3.5, 1.2, 3.5, 6.2, 2.2, 6.5, 7.1, 4.4, 5.0]
            }
        ]
    }

    return option
}
export const option3 = () => {
    const data = [582, 421.2, 622.1, 625.3, 265, 224]
    const indicator = [
        {
            name: '金鸡湖街道',
            max: 1000
        },
        {
            name: '狮山街道',
            max: 1000
        },
        {
            name: '太湖街道',
            max: 1000
        },
        {
            name: '城南街道',
            max: 1000
        },
        {
            name: '唯亭街道',
            max: 1000
        },
        {
            name: '斜塘街道',
            max: 1000
        }
    ]
    return {
        radar: {
            center: ['40%', '50%'],
            radius: '75%',
            axisName: {
                formatter: function (name: any, indicator: any) {
                    let arr
                    //   if(name=='开卡绑定数'||name=='渠道批量办理业务'){
                    //         arr = [
                    //         '{a|'+name+'}{b|'+indicator.value+'}'
                    //     ]
                    //   }else{
                    arr = ['{a|' + name + '}']
                    //   }

                    return arr.join('\n')
                },
                rich: {
                    //根据文字的组设置格式
                    a: {
                        color: '#fff',
                        fontSize: 14,
                        fontWeight: 600,
                        fontFamily: 'Source Han Sans CN'
                    }
                    // b:{
                    //     fontSize:14,
                    //     verticalAlign:'top',
                    //     width:57,
                    //     color:'#8E88FE',
                    //     fontWeight:600,
                    //     align:'center'
                    // },
                }
            },
            axisNameGap: 0,
            indicator: indicator,
            splitLine: {
                show: false
            },
            splitArea: {
                show: false
            },
            axisLine: {
                show: false
            }
        },
        series: [
            {
                // name: '家庭融合包',
                type: 'radar',
                data: [data],
                // value:14,
                label: {
                    show: true,
                    formatter: function (params: any) {
                        return params.value
                    },
                    color: '#fff',
                    // position:[-20,-10,-10,-10],
                    align: 'right',
                    distance: 10
                },
                symbolSize: [6, 6],
                lineStyle: {
                    //边缘颜色
                    width: 0
                },
                itemStyle: {
                    borderWidth: 1,
                    color: '#fff',
                    borderColor: '#F2F063'
                },
                areaStyle: {
                    color: 'rgb(83, 146, 134)',
                    opacity: 1
                }
            },
            {
                type: 'radar',
                data: [[1000, 1000, 1000, 1000, 1000, 1000]],
                symbol: 'none',
                lineStyle: {
                    width: 0
                },
                itemStyle: {
                    color: '#00CC99'
                },

                areaStyle: {
                    color: '#00CC99',
                    opacity: 0.06
                }
            },
            {
                type: 'radar',
                data: [[900, 900, 900, 900, 900, 900]],

                symbol: 'none',
                lineStyle: {
                    width: 0
                },
                itemStyle: {
                    color: '#33CC66'
                },

                areaStyle: {
                    color: '#33CC66',
                    opacity: 0.12
                }
            },
            {
                type: 'radar',
                data: [[800, 800, 800, 800, 800, 800]],

                symbol: 'none',
                lineStyle: {
                    width: 0
                },
                itemStyle: {
                    color: '#66CC66'
                },

                areaStyle: {
                    color: '#66CC66',
                    opacity: 0.18
                }
            },
            {
                type: 'radar',
                data: [[700, 700, 700, 700, 700, 700]],

                symbol: 'none',
                lineStyle: {
                    width: 0
                },
                itemStyle: {
                    color: '#99CC66'
                },

                areaStyle: {
                    color: '#99CC66',
                    opacity: 0.19
                }
            },
            {
                type: 'radar',
                data: [[600, 600, 600, 600, 600, 600]],

                symbol: 'none',
                lineStyle: {
                    width: 0
                },
                itemStyle: {
                    color: '#66CC00'
                },

                areaStyle: {
                    color: '#66CC00',
                    opacity: 0.17
                }
            },
            {
                type: 'radar',
                data: [[500, 500, 500, 500, 500, 500]],
                symbol: 'none',
                lineStyle: {
                    width: 0
                },
                itemStyle: {
                    color: '#339900'
                },

                areaStyle: {
                    color: '#339900',
                    opacity: 0.16
                }
            },
            {
                type: 'radar',
                data: [[400, 400, 400, 400, 400, 400]],

                symbol: 'none',
                lineStyle: {
                    width: 0
                },
                itemStyle: {
                    color: '#00CC99'
                },

                areaStyle: {
                    color: '#00CC99',
                    opacity: 0.13
                }
            }
        ]
    }
}
